<template>
  <uni-popup ref="popup" type="bottom" :safe-area="false" :mask-click="false">
    <view class="share-panel">
      <view class="title">分享给</view>
      <view class="flex">
        <view class="btn weixin" @click="select('weixin')">
          <view class="icon"></view>
          <view class="label">微信好友</view>
        </view>
        <view class="btn weixin_circle" @click="select('weixin_circle')">
          <view class="icon"></view>
          <view class="label">朋友圈</view>
        </view>
        <view class="btn copy" @click="select('copy')">
          <view class="icon"></view>
          <view class="label">复制链接</view>
        </view>
      </view>
      <view class="cancel" @click="close">取消</view>
    </view>
  </uni-popup>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import shareUtils from "@/libs/shareUtils";
export default {
  name: "Share",
  props:{
    isBlock:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['mine'])
  },
  methods: {
    open() {
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    select(channel) {
      if (this.isBlock){
        this.$emit('select',channel)
      }
      else {
        shareUtils.share(channel)
      }
      this.close()
    }
  }
}
</script>

<style lang="scss">
.share-panel {
  background-color: #f5f5f5;
  padding: 36upx;
  border-top-left-radius: 24upx;
  border-top-right-radius: 24upx;
  box-sizing: border-box;

  .title {
    font-size: 32upx;
    margin-bottom: 60upx;
  }

  .btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 80upx;
      height: 80upx;
      border-radius: 40upx;
      background-size: contain;
      background-position: center;
      margin-bottom: 20upx;
    }

    &.weixin {
      .icon {
        background-image: url(@/static/weixin@3x.png);
      }
    }

    &.weixin_circle {
      .icon {
        background-image: url(@/static/pengyouquan@3x.png);
      }
    }

    &.copy {
      .icon {
        background-image: url(@/static/lianjie@3x.png);
      }
    }

    .label {
      color: #383838;
      font-size: 26upx;
    }
  }

  .cancel {
    height: 60upx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32upx;
    margin-top: 60upx;
  }
}
</style>
